<template>
  <div>
    <!--搜索卡片-->
    <el-card class="box-card" :body-style="{ padding: '10px',height:'30px'}">
      <el-form :inline="true" :model="searchLog" ref="ruleForm" class="demo-form-inline">
        <el-form-item label="用户" prop="name">
          <el-input size="small" v-model="searchLog.name" placeholder="用户" style="width: 180px"></el-input>
        </el-form-item>
        <el-form-item label="操作类型" prop="type">
          <el-input size="small" v-model="searchLog.type" placeholder="操作类型" style="width: 180px"></el-input>
        </el-form-item>

        <el-form-item label="操作时间" prop="logTime">
          <el-date-picker
            size="small"
            v-model="dateRange"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="margin: 0 10px;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="success" round size="small" @click="handleSearch">查询</el-button>
          <el-button type="warning" round size="small" @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="Button">
      <el-button size="small" type="danger" @click="deleteBatch" icon="el-icon-delete-solid" plain>批量删除</el-button>

    </div>

    <!--数据表格-->
    <el-table :data="tableData" style="width: 100%;" max-height="100%"
              @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column prop="id" label="序号" width="100"></el-table-column>
      <el-table-column sortable prop="logTime" label="操作时间" width="200"></el-table-column>
      <el-table-column prop="log" label="日志" width="100"></el-table-column>
      <el-table-column prop="ip" label="ip地址" width="160"></el-table-column>
      <el-table-column prop="name" label="用户名" width="160"></el-table-column>
      <el-table-column prop="method" label="请求方法" width="100"></el-table-column>
      <el-table-column prop="type" label="操作类型" width="160"></el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>


    <!--分页查询-->
    <el-card class="box-card" :body-style="{ padding: '10px',height:'20px'}">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.searchLog.pageNum"
        :page-sizes="[7, 12, 17, 22]"
        :page-size="this.searchLog.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total">
      </el-pagination>

    </el-card>
  </div>
</template>

<script>
import {delLogBatch, delLogById, findAll} from "@/api/operationLog/opLog";

export default {
  name: "OperationLog",
  data() {
    return {
      tableData: [],
      dateRange: [], // 存储时间范围
      searchLog: {
        name: '',
        type: '',
        pageNum: 1,
        pageSize: 7,

        beginTime: '',
        endTime: '',
      },
      total: 0,

    }
  },
  methods: {
    // 查询全部
    findAll() {
      findAll(this.searchLog).then(res => {
        if (res.code === 20000) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      }).catch(error => {
        console.log('请求查询全部报错: ', error)
      })
    },
    // 查询
    handleSearch() {
      this.searchLog.beginTime = this.dateRange[0];
      this.searchLog.endTime = this.dateRange[1];
      console.log(this.searchLog)
      this.findAll()
    },


    resetForm(formName) {  // 重置
      this.$refs[formName].resetFields();
      this.dateRange = [];
      this.findAll();
    },

    // 删除
    handleDelete(index, row) {
      this.$confirm('是否确认删除编号为"' + row.id + '"的日志？', '删除信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delLogById(row.id).then(ret => {
          console.log(row.id);
          if (ret.code === 20000) {
            this.$message({
              type: 'success',
              message: '删除成功！',
              duration: 1000,
            });
            this.findAll();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 批量删除
    deleteBatch() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'info',
          message: '请选择要删除的数据！',
          duration: 1000
        });
      } else {
        this.$confirm('是否确认删除编号为"[' + this.multipleSelection + ']"的日志？', '批量删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delLogBatch({
            ids: this.multipleSelection.join(',')
          }).then(ret => {
            // console.log(ret);
            if (ret.code === 20000) {
              this.$message({
                type: 'success',
                message: '删除成功！',
                duration: 1000
              });
              this.findAll();
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },

    // 批量删除存的编号数组
    handleSelectionChange(val) {
      this.multipleSelection = [];
      for (const index in val) {
        this.multipleSelection.push(val[index].id); // 取出val中的id
      }
    },

    // 分页查询配置
    handleSizeChange(val) { // 处理页面大小改变时触发
      this.searchLog.pageSize = val;
      this.findAll()
    },
    handleCurrentChange(val) {// 当前页码改变时触发
      this.searchLog.pageNum = val;
      this.findAll()
    },

  },
  created() {
    this.findAll();
  },
}
</script>

<style scoped lang="scss">
.box-card {
  width: 100%;
  margin-top: 1px;
  height: 55px;
}

.Button {
  margin-left: 10px;
  margin-top: 10px;
}

.editDialog {
  width: 100%;
}
</style>
